// ES6
// 创建Vue对象 vm
let vm = new Vue({
    el: '#app', // 通过ID选择器找到绑定的HTML内容
    // 修改Vue读取变量的语法
    delimiters: ['[[',']]'],
    data:{
        // 定义变量为事件执行提供服务
        // v-model定义
        username:'',
        password:'',
        password2:'',
        mobile:'',
        allow:'',
        image_code_url:'', // 验证码url
        image_code:'',
        sms_code:'',
        sms_code_tip: '获取短信验证码',
        sending_flag: false, // 定义发送短信标识，防止恶意客户端频繁发送短信

        // v-show定义
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,

        //{{error_***_message}}定义
        error_name_message:'',
        error_mobile_message:'',
        error_image_code_message:'',
        error_sms_code_message:'请填写短信验证码',
    },
    // 页面加载完会被调用的
    mounted(){
        // 生成图形验证码
        this.generate_image_code()
    },
    // 定义绑定事件的方法
    methods:{
        // 发送短信验证码
        send_sms_code(){
            // 避免重复点击
            if (this.sending_flag == true){
                return; // 如果已经发送短信验证码，就退回
            }
            this.sending_flag = true;
            // 校验数据
            this.check_mobile()
            this.check_image_code()
            if (this.error_mobile_message == true || this.error_image_code == true) {
                // 如果校验没通过 释放发送短信权限
                this.sending_flag = false;
                return;
            }
            // 发送短信
            let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid;
            axios.get(url, {
                responseType: 'json',
            })
                // 发送成功
                .then(response => {
                    // 发送成功
                    // console.log(response.data)
                    if (response.data.code == '0') {
                        // 展示倒计时 60 秒效果 定义计时器函数
                        let num = 60;
                        let t = setInterval(() => {
                            if  (num == 1){
                                // 倒计时即将结束 停止回调函数
                                clearInterval(t) // 停止计时器的回调函数
                                this.sms_code_tip = '获取短信验证码';
                                this.generate_image_code(); // 刷新图片验证码
                                this.sending_flag = false
                            } else {
                                // 正在倒计时
                                num -= 1;
                            // 时刻改变 状态栏值
                                this.sms_code_tip = num +'秒';
                            }
                        }, 1000)
                    } else {
                        // 发送失败
                        if ( response.data.code == '4001'){
                            // 图形验证码失败
                            this.error_image_code_message = response.data.errmsg;
                            this.error_image_code = true
                        } else {
                            // 4002 发送短信过于频繁
                            this.error_sms_code_message = response.data.errmsg;
                            this.error_sms_code = true;
                        }
                        // 发生错误 随即产生新二维码
                        this.generate_image_code()
                        this.sending_flag = false
                    }
                })
                // 发送失败
                .catch(error => {
                    console.log(error.response);
                    // 释放发送权限
                    this.sending_flag = false
                })
        },
        // 生成图形验证码的方法
        generate_image_code(){
            this.uuid = generateUUID(); // common.js
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },

        // 校验用户名
        // 用户名是5-20个字符，[a-zA-Z0-9_-]
        check_username(){
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 使用正则匹配用户数据
            if (re.test(this.username)){
                //匹配成功，不展示错误信息
                this.error_name = false
            }else{
                // 匹配失败，展示错误信息
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            };

            // 判断用户名是否重复注册 在同一个函数下
            if (this.error_name == false) { // 只有当用户名满足用户名条件的时候进行进一步判断
                let url = '/username/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json',
                })
                    .then(response => {
                        // ajax请求成功
                        if (response.data.count == 1) {
                            // 用户名已经存在
                            this.error_name_message = '用户名已经存在';
                            this.error_name = true;
                        }
                    })
                    .catch(error => {
                        console.log(error.response)
                    })
            }
        },
        // 校验密码 [0-9A-Za-z]{8,20}
        check_password(){
            let re = /^[0-9A-Za-z]{8,20}$/;
            if (re.test(this.password)){
                // 校验成功
                this.error_password = false;
            }else{
                this.error_password = true;
            }
        },
        // 校验确认密码
        check_password2(){
            if (this.password != this.password2){
                this.error_password2 = true;
            }else{
                this.error_password = false;
            }
        },
        // 校验手机号 /^1[3-9]/d(9)$
        check_mobile(){
            let re = /^1[3-9]\d{9}$/;
            if (re.test(this.mobile)){
                this.error_mobile = false;
            }else{
                this.error_mobile_message = '您输入的手机号格式不正确,请重新输入';
                this.error_mobile = true;
            }
            // 校验电话号是否重复
            if (this.error_mobile == false) {
                let url = '/mobile/' + this.mobile + '/count/';
            axios.get(url,{
                responseType: 'json'
            })
                .then(response =>{
                    if (response.data.count == 1){
                        // 手机号码已经存在
                        this.error_mobile_message = '手机号码已经存在';
                        this.error_mobile = true;
                    } else {
                        // 手机尚未被注册
                        this.error_mobile = false;
                    }
                })
                .catch(error => {
                    console.log(error.response);
                })
            }
        },
        // 校验验证码
        check_image_code(){
            if (this.image_code.length != 4){
                this.error_image_code_message = '请正确输入验证码';
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }
        },
        check_sms_code (){
            if (this.sms_code.length != 6){
                this.error_sms_code_message = '请正确输入验证码'
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            };
        },
        //  校验是否勾选协议
        check_allow(){
            if (!this.allow){
                this.error_allow = true;
            }else{
                this.error_allow = false;
            }
        },
        // 监听表单提交时间
        on_submit(){
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_sms_code()
            this.check_allow();

            // 在校验之后， 注册数据中，只要有错误，就禁止表单的提交事件
            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true || this.error_mobile || this.error_allow == true){
                // 禁用表单提交事件
                window.event.returnValue = false

            }
        },
    },


});